<template>
    <div class="app-container">
        <!-- 查询条件 -->
        <el-card v-if="state.showSearch">
            <el-form ref="queryRef" :inline="true" :model="state.queryParams" label-width="68px">
                <el-form-item label="收货人姓名" label-width="85px" prop="recipientName">
                    <el-input v-model="state.queryParams.recipientName" placeholder="请输入收货人姓名" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="收货人电话" label-width="85px" prop="phoneNumber">
                    <el-input v-model="state.queryParams.phoneNumber" placeholder="请输入收货人电话" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="省级名称" prop="provinceName">
                    <el-input v-model="state.queryParams.provinceName" placeholder="请输入省级名称" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="市级名称" prop="cityName">
                    <el-input v-model="state.queryParams.cityName" placeholder="请输入市级名称" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="区级名称" prop="districtName">
                    <el-input v-model="state.queryParams.districtName" placeholder="请输入区级名称" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="性别" prop="recipientSex">
                    <el-select  v-model="state.queryParams.recipientSex" placeholder="性别" clearable>
                        <el-option
                          v-for="dict in sys_user_sex"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="详细地址" prop="detailAddress">
                    <el-input v-model="state.queryParams.detailAddress" placeholder="请输入详细地址" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="创建时间" style="width: 308px">
                    <el-date-picker
                        v-model="state.dateRange"
                        value-format="YYYY-MM-DD"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    ></el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="Search" @click="getDataList">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery(proxy)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 表格 结果展示 -->
        <el-card style="margin-top: 20px;">

            <template #header>
                <el-row :gutter="10">
                    <el-col :span="1.5">
                        <el-button v-hasPermi="['exercise:addresses:add']" type="primary" plain icon="Plus"
                            @click="addOrUpdateHandle()">新增</el-button>
                    </el-col>
                   <el-col :span="1.5">
                        <el-button v-hasPermi="['exercise:addresses:edit']" type="success" plain icon="Edit" :disabled="state.single"
                            @click="addOrUpdateHandle(state.ids)">修改</el-button>
                    </el-col>
                   <el-col :span="1.5">
                        <el-button v-hasPermi="['exercise:addresses:remove']" type="danger" plain icon="Delete"
                            :disabled="state.multiple" @click="deleteBatchHandle(state.ids)">删除</el-button>
                    </el-col>
                    <right-toolbar v-model:showSearch="state.showSearch" @queryTable="getDataList"></right-toolbar>
                </el-row>
            </template>

            <el-table v-loading="state.dataListLoading" :data="state.rows" style="width: 100%"
                @selectionChange="selectionChangeHandle">
                <el-table-column type="selection" align="center" width="55" />
                <el-table-column label="地址id" align="center" width="50" prop="addressId" />
                <el-table-column label="用户id" align="center" width="50" prop="userId" />
                <el-table-column label="收货人姓名" align="center" prop="recipientName"  />
                <el-table-column label="收货人电话" align="center" width="110" prop="phoneNumber" />
                <el-table-column label="性别" align="center" prop="recipientSex">
                    <template #default="scope">
                        <dict-tag :options="sys_user_sex" :value="scope.row.recipientSex" />
                    </template>
                </el-table-column>
                <el-table-column label="省级名称" align="center" prop="provinceName" :show-overflow-tooltip="true" />
                <el-table-column label="市级名称" align="center" prop="cityName" :show-overflow-tooltip="true" />
                 <el-table-column label="区级名称" align="center" prop="districtName" :show-overflow-tooltip="true" />
                <el-table-column label="详细地址" align="center" prop="detailAddress" :show-overflow-tooltip="true" />
                <el-table-column label="标签" align="center" prop="label" :show-overflow-tooltip="true" />
                <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
                <el-table-column label="更新时间" align="center" prop="updateTime" width="180" />
                <el-table-column label="创建人" align="center" prop="createBy" width="180" />
                <el-table-column label="修改人" align="center" prop="updateBy" width="180" />

                <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                    <template #default="state">
                        <el-button v-hasPermi="['exercise:addresses:edit']" circle type="primary" icon="Edit"
                            @click="addOrUpdateHandle(state.row.addressId)" />
                        <el-button v-hasPermi="['exercise:addressesstate.ids[0]remove']" circle type="danger" icon="Delete"
                            @click="deleteHandle(state.row.addressId)" />
                    </template>
                </el-table-column>

            </el-table>
            <pagination v-show="state.total > 0" v-model:page="state.queryParams.pageNum"
                v-model:limit="state.queryParams.pageSize" :total="state.total" @pagination="getDataList" />
        </el-card>

        <!-- 引用新增或修改的界面 -->
        <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>

    </div>
</template>

<script lang="ts" setup>
import {IHooksOptions} from '@/hooks/interfaceservice'
import {useCrud} from '@/hooks/indexservice'
/* eslint-disable camelcase */
import { ref, reactive,  getCurrentInstance, ComponentInternalInstance } from 'vue'
import { delAddresses, listAddresses } from '@/api/app/store/addresses';

import AddOrUpdate from './add-and-edit.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_user_sex } = proxy!.useDict('sys_user_sex');

//定义接口，后台请求的API，以及查询条件的表单对象
const state: IHooksOptions = reactive({
	queryApi: listAddresses,
	deleteApi: delAddresses,
    exportApi: undefined,
	//主键名称
	primaryKey:'addressId',
	queryForm:  {
		page:1,
		size:10,
	},
    //日期查询
    dateRange:[]
})

//vue3中叫组合式函数
const { getDataList,  selectionChangeHandle,
        sortChangeHandle, resetQuery,deleteHandle, deleteBatchHandle }=useCrud(state)

// 调用新增或修改页面的方法
const addOrUpdateRef = ref()
//新增或修改的时候传递addressId
const addOrUpdateHandle = (addressId?: number) => {
    //调用它里面的init方法
	addOrUpdateRef.value.init(addressId)
}


</script>

<style>
</style>
